//@flow


/**
 * 模仿modal展示视图动画
 */
import React, { Component } from 'react';
import { 
    View,
    Animated,
 } from 'react-native';
import { SCREEN_SIZE } from '../util/constant/size';

type State = {
    modal_view_y : Animated.Value
}
export const presentModalHOC = (Target)=>{

    return class Wrapper extends Component <{},State>{
        /**初始化state */
        state:State = {
            modal_view_y : new Animated.Value(SCREEN_SIZE.height)
        }
        /**视图渲染完毕 */
        componentDidMount(){
            this.animated(true)
        }
        /**视图即将移除 */
        componentWillUnmount(){
            // this.animated(false)
        }
        /**开始动画 */
        animated(start:boolean,callback:()=>{}=null){
            Animated.timing(
                this.state.modal_view_y,
                {
                    toValue:start?0:SCREEN_SIZE.height,
                    duration:300,
                }
            ).start(()=>{
                // this.animated()
                if(callback){
                    callback()
                }
                
            })
        }
        render(){
            return (
                <Animated.View style={{
                    top : this.state.modal_view_y
                }}>
                    <Target />
                </Animated.View>
            )
        }
    }
}